<template>
    <h1 style="text-align: center;">这是注册页面</h1>

    <table class="table-border">
        <tr>
            <td>用户名</td>
            <td>
                <input type="text" v-model="info.UL_Name" placeholder="请输入用户名">
            </td>
        </tr>
        
        <tr>
            <td>密码</td>
            <td>
                <input type="password" v-model="info.UL_Pwd" placeholder="请输入密码">
            </td>
        </tr>

        <tr>
            <td colspan="2">
                <input type="button" value="注册" @click="SaveData" class="btn btn-success">
            </td>
        </tr>
    </table>

</template>


<script setup lang="ts">
import {ref} from 'vue'
import axios from 'axios'
import {useRouter} from 'vue-router'

//获取路由对象
const router = useRouter();

//创建响应式变量
const info = ref({
    UL_Name:"",
    UL_Pwd:""
});

//保存数据函数
const SaveData = () => {
    //
    if(info.value.UL_Name==""){
        alert("用户名称不能为空");
        return;
    }
    if(info.value.UL_Pwd==""){
        alert("密码不能为空");
        return;
    }
    if(info.value.UL_Pwd.length<6 || info.value.UL_Pwd.length>14){
        alert("密码长度介于6-14位");
        return;
    }
    //alert(info.value.UL_Name+","+info.value.UL_Pwd);

    //通过Axios发送请求
    axios({
        url:"http://localhost:53279/api/User/UserRegister",
        method:"post",
        data:{
            UL_Name:info.value.UL_Name,
            UL_Pwd:info.value.UL_Pwd
        }
    })
    .then(function(res){
        if(res.data>0){
            alert("注册成功");
            //跳转到登录页面
            router.push("/Login");
        }
        else if(res.data==-1){
            alert("用户名已存在");
            router.push("/Register");
            return;
        }
        else{
            alert("注册失败");
            router.push("/Register");
        }
    })
    .catch(function(err){
        console.log(err);
    })
}
</script>